<template>
	<div>
		<div class="header">
			<Fan></Fan>
			<div class="content ">
				<a href="#/detail"><span>商品</span></a>
				<a href="#/list"><span>详情</span></a>
				<a href="#/comments"><span>评价</span></a>
			</div>
		</div>
		<div class="zhongjian">
			<Swiper>
				<Slide>
					<img src="../../assets/liu/1.png" />
				</Slide>
				<Slide>
					<img src="../../assets/liu/1.png" />
				</Slide>
				<Slide>
					<img src="../../assets/liu/1.png" />
				</Slide>
			</Swiper>
			<div class="zidi">
				<span>{{goods}}</span>
				<br />
				<span>{{type}}</span>
				
				<span class="price">¥{{price}}</span>
				<div class="fenxiang">
					<a href="#/Login">
						<img src="../../assets/liu/分享.png" />
					<br />
					<span>分享</span>
					</a>
				</div>
			</div>
		</div>
		<div class="kongbai"></div>
		<div class="yixuan">
			<span>已选</span>
			<span class="lafei">法国18年拉菲</span>
			<em  @click="reduce">-</em>
			<strong> {{num}}</strong>
			<em  @click="add">+</em>
		</div>
		<div class="kongbai"></div>
		<div class="adress">
			<span>送至</span>
			<span> {{place}}  </span>
			<a href="#/dizhi" @click="show">
				<img src="../../assets/liu/右箭头.png" />
									
				<!--地址组件-->	
				<dizhi class="hide" ></dizhi>
			</a>
			<br />
			<span class="one">支持7天无理由退货</span>
			<span class="two">包邮</span>
		</div>
		<div class="kongbai"></div>
		<div class="pingjia">
			<span class="count">评价(30)</span>
			<div class="pingjia_right">
				<span>好评度:<em>100%</em></span>
				<img src="../../assets/liu/右箭头.png" />
			</div>
			<div class="pingjia_zhongjian">
				<div class="touxiang"></div>
				<div class="dianzhu">
					<span>李****店</span>
					<span>G4</span>
					<img src="../../assets/liu/星星.png" />
					<img src="../../assets/liu/星星.png" />
					<img src="../../assets/liu/星星.png" />
				</div>
				<p>物美价廉,服务非常周到</p>
				<div class="tupian">
					<span>有图评价(3533) </span>
					<div class="chuntupian">
						<img src="../../assets/liu/8.png" />
						<img src="../../assets/liu/8.png" />
						<img src="../../assets/liu/8.png" />
					</div>
				</div>
			</div>
		</div>
	    <div class="jiewei">
			<div class="bei"><span>全部评价(12345)</span></div>
			<div class="jing"><span>购买咨询(1606)</span></div>
		</div>
		<div class="zhongji"></div>
		<Footer @toParent="chuanzhi"></Footer>
	</div>
</template>

<script>
	import { Swiper, Slide } from 'vue-swiper-component';
	import Footer from './Footer'
	import Fan from './FanHui'
	import dizhi from '@/components/fenlei/second/dizhi.vue'
	export default {
		name: 'detail',
		data() {
			return {
				num:1,
				place:'',
				src:"",
				goods:"法国浪漫红酒庄园百年酿制",
				type:'粉红色 650ml',
				price:199
				
			}
		},
		mounted(){		
			this.place = this.$store.state.place[this.$store.state.place.length-1];
			var tiao = this.$store.state.tiao[this.$store.state.tiao.length-1];
			if(tiao){
				this.num = tiao;
				this.$store.commit('tiao',1);
			}else{
				this.num = 1;
			}
		},
		computed:{
			place(){
				
				return this.$store.state.place
			},
			tiao(){
				return this.$store.state.tiao
			}
		},
		methods: {
			add:function(){
				this.num++
			},
			reduce:function(){
				this.num--;
				if(this.num<=0){
					this.num=1;
				}
			},
			show:function(){
				this.$store.commit('tiao',this.num);
				
			},
			chuanzhi:function(){
				this.src = '../../assets/liu/1.png';
				var data = [];
				data.push(this.src);
				data.push(this.goods);
				data.push(this.type);
				data.push(this.num);
				data.push(this.place);
				data.push(this.price)
				this.$store.commit('shopping',data);
			}
			
		},
		components: {
			Swiper,
			Slide,
			Footer,
			Fan,
			dizhi
		},
		computed:{
			str(){
				var arr = this.$store.state.str;
				return arr
			}
		}
		
	}
</script>

<style scoped>
	.hide{display: none;}
	a{
		text-decoration: none;
		color:dimgray ;
		font-size: 1.5rem;
	}
	.header {
		height: 5%;
		padding: 1rem;
	}
	.header .content{
		margin-top: 0.3rem;
	}
	.header span {
		font-size: 1.8rem;
		padding-left: 2rem;
	}
	
	.header span:nth-child(1) {
		color: red;
	}
	
	.content {
		text-align: center;
		margin-top: -2.5rem;
	}
	
	.zhongjian {
		height: 24rem;
		border-top: 1px solid lightgray;
	}
	
	.zhongjian .zidi {
		width: 65%;
		height: 3rem;
		border-right: 1px solid lightgray;
		font-size: 1.3rem;
		padding: 0.8rem;
		margin-top: 0.8rem;
		margin-left: 0.8rem;
		position: relative;
	}
	
	.zidi .fenxiang img {
		width: 3rem;
	}
	
	.zidi .fenxiang {
		position: absolute;
		left: 108%;
		top: -2%;
	}
	
	.kongbai {
		height: 1.2rem;
		background: rgba(204, 204, 204, 0.2);
	}
	
	.yixuan {
		height: 4.8rem;
		font-size: 1.3rem;
	}
	.yixuan em{
		display: inline-block;
		width: 1.6rem;
		height: 2rem;
		line-height: 2rem;
	    text-align: center;	
		background: #D2D2D2;
	}
	.lafei{margin-right: 21%;}
	.yixuan img {
		width: 1.6rem;
		padding-left: 39%;
	}
	
	.yixuan span {
		line-height: 4.8rem;
		color: gray;
	}
	
	.yixuan span:nth-child(1) {
		color: lightgray;
		padding: 1.5rem;
	}
	
	.adress {
		
		height: 9.6rem;
		font-size: 1rem;
	}
	
	.adress img {
		width: 1.6rem;
		margin-left: 13%;
		vertical-align: -21%;
	}
	
	.adress span {
		line-height: 4.8rem;
		color: gray;
	}
	
	.adress span:nth-child(1) {
		color: lightgray;
		padding: 1.5rem;
	}
	
	.adress .one {
		color: lightgray;
		padding: 1.5rem;
	}
	
	.adress .two {
		color: lightgray;
		padding: 1.5rem;
	}
	
	.pingjia {
		height: 13rem;
	}
	
	.pingjia_right img {
		width: 1.3rem;
	}
	
	.pingjia .count {
		display: inline-block;
		margin-top: 1.5rem;
		margin-left: 1.5rem;
	}
	
	.pingjia .pingjia_right {
		margin-top: -1.8rem;
		margin-left: 71%;
	}
	
	.pingjia .pingjia_right em {
		color: red;
	}
	.pingjia_zhongjian .touxiang {
		width: 2.5rem;
		height: 2.5rem;
		background: rgba(204, 204, 204, 0.6);
		border-radius: 50%;
		margin-top: 1.5rem;
		margin-left: 1.5rem;
	}
	
	.pingjia_zhongjian .dianzhu {
		margin-left: 16%;
		margin-top: -2.3rem;
	}
	
	.pingjia_zhongjian .dianzhu img {
		width: 1.3rem;
	}
	
	.pingjia_zhongjian p {
		margin-top: 1.5rem;
		margin-left: 1.5rem;
	}
	
	.tupian img {
		width: 8rem;
		height: 10rem;
	}
	
	.tupian .chuntupian {
		display: flex;
		justify-content: space-around;
	}
	
	.tupian {
		margin-top: 2.5rem;
	}
	
	.tupian span {
		margin-left: 1.5rem;
	}
	.jiewei{
		height: 4rem;
		border-top: 1px solid rgba(204, 204, 204, 0.6);
		margin-top:9.7rem ;
		position: relative;
	}
	.jiewei .bei{
		height: 3rem;
		width: 48%;
		border-right: 1px solid rgba(204, 204, 204, 0.6);
		background: url(../../assets/liu/评价.png) no-repeat;
		background-size:2.5rem ;
		margin-top: 1.5rem;
		margin-left: 1rem;
	}
	.jiewei .bei span{
		padding-left: 3rem;
		line-height: 2.4rem;
	}
	.jiewei .jing{
		background: url(../../assets/liu/咨询.png) no-repeat;
		background-size:2.5rem;
		position: absolute;
		right: 0.6rem;
		top: 1.5rem;
	}
	.jiewei .jing span{
		padding-left: 3.5rem;
		line-height: 2.4rem;
	}
	.zhongji{
		height: 4rem;
		margin-top: 3rem;
		background:rgba(204, 204, 204, 0.6) ;
	}
	.price{color: deeppink; font-size: 1.5rem;margin-left: 15%;}
	
</style>